<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--form 提交表单-->
    <!--action 属性 是用来指明 form表单体提交数据的URL地址  默认值是当前页面
    method属性是用来 指明当前表单提交的请求方式 默认是get，目前form只支持 get 和 post
    切记，如果想在form提交的时候 带上用户输入的数据，
    必须指明 input的name属性
    提交行为的触发 必须使用 type 为 submit 的表单标签（input，button）-->
    <form action="" method="post">
        <!--lable 标签用于提示 input
        for 属性 要和 input 的id 属性进行对应 否则会报错
        -->
        <label for="">用户名:</label>
        <!--id 是唯一标识 值必须是唯一的
        value 是当前input输入的有效值-->
        <input type="text" name="uname" id="" value="王大锤">
        <!--为了使解析更快-->
        <label for="">密码:</label>
        <input type="text" name="upassword">
        <br />
        <label for="">性别</label>
        <input type="text" placeholder="可选">
        <!--checked表示选中
        disable 表示不能选中 禁止交互-->
        <input type="radio" name="sex" value="m" checked disabled>男
        <input type="radio" name="sex" value="f">女
        <input type="submit">
        <!--reset 表示重置-->
        <input type="reset">
    </form>
    <form action="http://www.baidu.com/s">
        <input type="text" placeholder="关键字" name="wd">
        <!--<input type="submit" value="点击">-->
        <button type="submit">搜索</button>
    </form>
    <hr />
    <!--多选列表-->
    <input list="footlist"/>
    <datalist id="footlist">
        <option value="1">苹果</option>
        <option value="2">榴莲</option>
        <option value="3">香蕉</option>
    </datalist>
    <!--input 的类型
    type 是指明 input的类型
    text 文本类型 String类型
    -->
    <hr />
    <input type="password" piaceholder="密码">
    <hr />
    <input type="search">
    <hr />
    <input type="color">
    <hr />
    <input type="checkbox">
    <input type="radio">
    <!--性别的选中-->
    <hr />
    <input type="radio" name="sex" value="m">男
    <input type="radio" name="sex" value="f">女
    <hr />
    <input type="data">
    <input type="month">
    <input type="time">
    <input type="datetime-local">
    <!--文件上传-->
    <input type="file">
    <!--城市列表-->
    <select name="">
        <!--select 表选择-->
        <option value="郑州">郑州</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <optgroup label="河南">
            <option value="郑州">郑州</option>
            <option value="新乡">新乡</option>
            <option value="南阳">南阳</option>
        </optgroup>
    </select>
    <hr />
    <!--对话框 多行文本框-->
    <label for="message">留言/评论/建议</label>
    <textarea name="" cols="30" rows="10" placeholder="留下宝贵的意见"></textarea>
    <!--块级标签 ：独占一行-->
    <div style="height:100px;background-color:red;color:white">
        这是一个块级标签
    </div>
    <!--h1~h6 p table ul li ol tr form等-->
    <table>
        <!--tr*3>td{第$列}*4-->
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
            <td>第4列</td>
        </tr>
    </table>
    <span>这是一个行内元素</span>
    <!--<a href=""></a>-->
    <!--行内块级元素
    input img button lable textarea-->
    <!--盒模型-->
    <hr />
    <div style="width:300px;height:200px;background-color:red;margin-left=100;margin-top:50px;border:10px solid pink;padding-left:100px;">
        <a >百度一下</a>
    </div>
</body>
</html>